<template>
    <div class="pagestyle">
        <div class="addBox">
            <stepcom :stepNum="stepNum" :stepList="state.stepList"></stepcom>
            <div v-if="stepNum == 1" style="text-align:center;height:64vh;">
                <onestep :formList="state.formList" :formListRules="state.formListRules" ref="oneStepRef"
                    @vateResult="vateResult"></onestep>
                <div class="btnSubmit">
                    <el-button type="primary" @click="stepNumClick(2,true)">下一步</el-button>
                </div>
            </div>
            <div v-if="stepNum == 2" style="margin-top:40px;">
                <p class="p_title">查询测点</p>
                <div style="background:rgba(91, 109, 128, .04);margin:0 10px;padding: 10px;">
                    <querybox :queryList="state.querystwo" @query="queryClick"></querybox>
                    <vxe-table height="200" :data="state.listAnalog" border="inner">
                        <vxe-column type="seq" :width="55" title="序号"></vxe-column>
                        <vxe-column field="code" title="测点编号"></vxe-column>
                        <vxe-column field="sensorName" title="传感器名称"></vxe-column>
                        <vxe-column field="name" title="名称"></vxe-column>
                        <vxe-column field="place" title="地点"></vxe-column>
                        <vxe-column title="操作" :min-width="80">
                            <template #default="{ row }">
                                <el-button type="text" @click="selectClick(row)">选择</el-button>
                            </template>
                        </vxe-column>
                    </vxe-table>
                </div>
                <p class="p_title">已选因子({{ state.yinziList.length }})</p>
                <yincard :cardList="state.yinziList" :listAnalog="state.listAnalog" :editShow="true"></yincard>
                <div class="btnSubmit">
                    <el-button type="info" @click="stepNumClick(1,false)">上一步</el-button>
                    <el-button type="primary" @click="stepNumClick(3,false)">下一步</el-button>
                </div>
            </div>
            <div v-if="stepNum == 3">
                <p class="p_title">控制设备</p>
                <liandcom></liandcom>
                <div class="btnSubmit">
                    <el-button type="info" @click="stepNumClick(2,false)">上一步</el-button>
                    <el-button type="primary" @click="stepNumClick(4,false)">保存</el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
    import list_controller from "@/components/commonCom/list_controller";
    import querybox from "@/components/commonCom/querybox";
    import stepcom from "./zuheCom/stepcom";
    import onestep from "./zuheCom/onestep";
    import yincard from "./zuheCom/yincard";
    import liandcom from "./zuheCom/liandcom";

    import {
        computed,
        reactive
    } from "vue";
    import {
        ElMessage,
        ElMessageBox
    } from "element-plus";
    import {
        table_headers
    } from '@/components/commonCom/table_headers';
    import axios from "@/utils/request"
    import usePagesStore from '@/store/modules/pages'
    import {
        getlistAnalogs,
        getlistSitesList,
        getoutagelistSensorPoints
    } from '@/api/config'
    import _ from 'lodash'
    const {
        proxy
    } = getCurrentInstance();
    const store = usePagesStore()
    const router = useRouter();
    let previewHttps =
        import.meta.env.VITE_APP_HTTP
    const oneStepRef = ref(null)
    const stepNum = ref(1)
    const addForm = ref({
        status: "A"
    })
    const addShow = ref(true)
    const yinziList = ref([])
    const editId = ref(undefined)
    let state = reactive({
        stepList: [{
            name: '设置联动名',
            code: 1,

        }, {
            name: '选择因子',
            code: 2
        }, {
            name: '联动设备',
            code: 3
        }],
        stepNum: 1,
        modalTitle: '因子高级配置',
        addModal: false,
        addShow: true,
        querystwo: [{
            field: 'ponitId',
            title: '设备名称',
            type: 'input',
            binddata: ''
        }, {
            field: 'placeName',
            title: '测点编号',
            type: 'input',
            binddata: ''
        }, {
            field: 'placeName',
            title: '安装地点',
            type: 'input',
            binddata: ''
        }],
        listAnalog: [],
        options: {
            tableheads: computed(() => table_headers.configPowerOutage),
            queryList: {
                dropdownUrl: '',
                querys: [],
                queryMap: new Map([
                    ['sensorTypeId', 'safety_pointType'],
                    ['deviceTypeId', 'safety_deviceType'],
                    ['alarmTypeId', 'alarmType']
                ])
            },
            dataUrl: '/power/outage/list',
            delUrl: '/power/outage/del',
            addUrl: '/power/outage/add',
            descUrl: '/power/outage/getById',
            editUrl: '/power/outage/modify',
        },
        formList: [{
            field: 'combinationPowerOutageName',
            title: '设置联动名',
            type: 'input',
            binddata: ''
        }, {
            field: 'cutElectricityType',
            title: '分站号',
            type: 'select',
            binddata: '',
            options: [{
                label: '组合断电',
                value: '组合断电'
            }, {
                label: '瓦斯突出断电',
                value: '瓦斯突出断电'
            }]
        }],
        formListRules: {
            combinationPowerOutageName: [{
                required: true,
                message: '请输入',
                trigger: 'blur'
            }],
            cutElectricityType: [{
                required: true,
                message: '请选择',
                trigger: 'change'
            }],
        },
        addForm: {
            status: "A"
        },
        yinziList: [],
        yinziListHB: [],
        expression: [],
        editId: undefined,
        stationmodelList: [],
        listSensorPointsList: []
    })

    function addBtn() {
        addShow.value = true
        editId.value = undefined
    }

    async function editBtn(row) {
        stepNum.value = 1
        editId.value = row.id
        addShow.value = true
        await axios.post(state.options.descUrl, {
            id: row.id
        }).then(res => {
            addForm.value = res.data
            state.formList.forEach(item => {
                item.binddata = res.data[item.field]
            })
            state.yinziList = res.data.pointDtoList
            let arr = []
            res.data.pointDtoList.forEach(item => {
                if (!item.marker) {
                    arr.push(item)
                }
            })
            state.expression = res.data.expression
            state.yinziListHB = arr
            yinziList.value = state.yinziList
            addForm.value.controlPort = res.data.controlPort.split(',')
            addForm.value.feedCondition = res.data.feedCondition.split(',')
        })
    }

    function vateResult(data, type) {
        state.formList.forEach(item => {
            Object.keys(data).map(item1 => {
                if (item.field = item1) {
                    item.binddata = data[item1]
                    addForm.value[item.field] = data[item1]
                }
            })
        })
        if (type) {
            stepNum.value = 2
        }
    }

    function threeStep(list) {
        addForm.value.expression = list.expression
        state.yinziList.forEach(item => {
            list.pointDtoList.forEach(itemgb => {
                if (item.code == itemgb.code) {
                    item.marker = itemgb.marker
                }
            })
        })
        addForm.value.pointDtoList = _.uniqBy(state.yinziList, 'code')
    }

    function stepNumClick(type, state) {
        if (state) {
            oneStepRef.value.submitForm()
        } else {
            if (type == 3) {
                if (yinziList.value.length == 0) {
                    ElMessage.warning('请先选择测点因子')
                } else {
                    stepNum.value = type
                }
            } else {
                stepNum.value = type
            }
            if (type == 4) {
                addForm.value.controlPort = addForm.value.controlPort.toString()
                addForm.value.feedCondition = addForm.value.feedCondition.toString()
                if (editId.value) {
                    addForm.value.id = editId.value
                    axios.post('power/outage/modify', addForm.value).then(res => {
                        addShow.value = false
                        if (res.code == 200) {
                            ElMessage.success(res.data)
                        }
                    }).catch(err => {
                        stepNum.value = 1
                    })
                } else {
                    axios.post('power/outage/add', addForm.value).then(res => {
                        addShow.value = false
                        if (res.code == 200) {
                            ElMessage.success(res.data)
                        }
                    }).catch(err => {
                        stepNum.value = 1
                    })
                }
            }
        }
    }

    function getlistAnalogsData() {
        let data = {}
        state.querystwo.forEach(item => {
            data[item.field] = item.binddata
        })
        getlistAnalogs(data).then(res => {
            state.listAnalog = res.data
        })
        getlistSitesList().then(res => {
            state.stationmodelList = Object.keys(res.data).map(item => {
                return {
                    label: item + '-' + res.data[item],
                    value: item
                }
            })
        })
        getoutagelistSensorPoints({}).then(res => {
            state.listSensorPointsList = res.data
        })
    }

    function queryClick(type) {
        let data = {}
        if (type == 2) {
            state.querystwo.forEach(item => {
                data[item.field] = ''
            })
        }
        getlistAnalogsData()
    }

    function selectClick(row) {
        row.marker = true
        row.title=row.code+'/'+row.name
        row.objarr=[
            {left:'设备名称',right:row.code},
            {left:'地点',right:row.code+'/'+row.name},
            {left:'报警模式',right:row.place}
        ]
        state.yinziList.push(row)
        yinziList.value = state.yinziList
    }

    function selectHBClick(row) {
        state.yinziListHB.push(row)
    }

    function removeHBClick(code) {
        state.yinziList.splice(state.yinziList.indexOf(code), 1)
        state.yinziListHB.splice(state.yinziListHB.indexOf(code), 1)
    }

    function deleteBtn(row) {
        let ids = []
        if (row != 'mul') {
            ids = [row.id]
        } else {
            if (store.records.length > 0) {
                ids = store.records.map(item => {
                    return item.id
                })
            } else {
                proxy.$modal.msgSuccess('请先勾选所要删除数据!');
            }
        }
        if (ids.length > 0) {
            axios.post(state.options.delUrl, ids).then(res => {
                if (res.code == 200) {
                    proxy.$refs['zujianname'].getData()
                    state.addModal = false
                    proxy.$modal.msgSuccess(res.msg);
                    store.records = []
                }
            })
        }

    }
    getlistAnalogsData()
</script>
<style lang="scss" scoped>
    .p_title {
        font-size: 16px;
        font-weight: 700;
        padding: 0 10px;
    }

    .pagestyle {
        overflow-y: auto;

        .addBox {
            padding: 42px 0;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.8);
            margin: 10px;
        }

        .remarkBox {
            padding: 10px;
            font-size: 14px;
        }

        .btnSubmit {
            margin-top: 40px;
            text-align: center;
        }
    }
</style>